<template>
	<view class="personnel-evaluation">
		<view class="search-box">
			<view class="search-item">
				<view class="label">
					类型
				</view>
				<view class="content">
					<picker @change="bindPickerChange" :value="searchData.type" :range="typeArr">
						<input class="uni-input" :value="typeArr[searchData.type]" disabled />
					</picker>
				</view>
			</view>
			<view class="search-item">
				<view class="label">
					名称
				</view>
				<view class="content">
					<input class="uni-input" placeholder="请输入名称" v-model="searchData.rsName" />
				</view>
			</view>
			<view class="search-item">
				<view class="label">
					发布日期
				</view>
				<view class="content">
					<uni-datetime-picker :border="false" class="uni-input-date" type="date" placeholder="选择发布日期"
						v-model="searchData.releaseDate" :end="endDate" />
				</view>
			</view>
			<view class="search-btn">
				<view class="submit" @click="submitHandle">查询</view>
				<view class="reset" @click="resetHandle">重置</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				endDate: new Date().toString(),
				typeArr: [
					'法律',
					'行政法规',
					'部门规章',
					'标准规范',
					'行政规范',
				],
				searchData: {
					rsName: "",
					releaseDate: "",
					type: 0,
				},
			}
		},
		methods: {
			bindPickerChange(e) {
				this.searchData.type = e.detail.value;
			},
			submitHandle() {
				if (!this.searchData.rsName && !this.searchData.releaseDate) {
					uni.showToast({
						title: "请输入名称或者发布日期",
						icon: 'none'
					})
					return;
				}
				this.$store.commit('set_tempData', this.searchData)
				this.$goBack('./search-result')
			},
			resetHandle() {
				Object.assign(this.searchData, {
					rsName: "",
					releaseDate: "",
					type: 0,
				})
			},
		},
		mounted() {}
	}
</script>

<style lang="scss">
	.personnel-evaluation {
		padding: 40rpx 30rpx;
		background-color: #fff;
		box-sizing: border-box;
		height: 100vh;
	}

	.uni-input-date ::v-deep {
		.uni-date-x {
			box-sizing: border-box;
			height: 76rpx;
			line-height: 76rpx;
			padding: 0 28rpx;
			border-radius: 8rpx;
			background: #F5F5F5;
			width: 100%;
		}
	}

	.search-item {
		display: flex;
		align-items: center;
		margin-bottom: 36rpx;

		.label {
			width: 230rpx;
			font-size: 28rpx;
			color: #333;
			line-height: 28rpx;
			display: flex;
			align-items: center;

			.img-icon {
				margin-right: 10rpx;
			}

			.base64 {
				height: 76rpx;
				width: 152rpx;
			}
		}

		.content {
			flex: 1;

			input {
				box-sizing: border-box;
				height: 76rpx;
				line-height: 76rpx;
				padding: 0 28rpx;
				border-radius: 8rpx;
				background: #F5F5F5;
				width: 100%;
			}
		}
	}

	.search-btn {

		.submit,
		.reset {
			margin: 0 auto;
			width: 70%;
			border-radius: 8rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			font-size: 32rpx;
			color: #333;
		}

		.submit {
			background: #FFD04D;
			margin-bottom: 26rpx;
		}

		.reset {
			background: #FFDF85;
		}
	}
</style>
